<!-- src/components/Palette.vue -->
<script setup>
const list = [
  { name: '矩形', type: 'rect' },
  { name: '圆形', type: 'circle' },
  { name: '线条', type: 'line' },
  { name: '折线', type: 'polyline' },
  { name: '多边形', type: 'polygon' },
]
function handleDragStart(type) {
  // 拖拽时，将图形类型传递给拖拽事件
  event.dataTransfer.setData('shape-type', type)
}
</script>
<template>
  <div>
    <h3>图形工具箱</h3>
    <button
      v-for="item in list"
      :key="item.type"
      :draggable="true"
      class="btn"
      @dragstart="handleDragStart(item.type)"
    >
      {{ item.name }}
    </button>
  </div>
</template>
